<template>
	<view class="content">
		<view class="header">
			<u-icon name="arrow-leftward" size="36" color="#fff" @click="goindex"></u-icon>
		</view>
		<view class="section">
			<view class="shenlongxiang_box">
				<text>大王赏</text>
				<image src="https://mh.qingfentool.vip/upload/image/20230529/fb2e040f5177508cb28295f52b25c021.png">
				</image>
			</view>
			<text style="font-size: 28rpx;font-weight: 400;color: #fff;">请选择登录方式</text>
		</view>
		<view class="footerall">
			<view class="footimg">
				<view class="" v-if='isIos'>
					<image src="https://mh.qingfentool.vip/upload/image/20230529/22f02483c95d1785439c6e84e1575c6b.png"
						@tap="login_weixin()"></image>
					<text>微信</text>
				</view>

				<view class="">
					<image src="https://mh.qingfentool.vip/upload/image/20230529/5f2b4e11b871ba4ede87885e279659d6.png"
						@tap="gophone()"></image>
					<text>手机号</text>
				</view>
			</view>
		</view>
		<view class="agreement" @tap="agreementState">
			<view class="img">
				<image :src="iconurl + '/static/newImg/weixuan.png'" mode="" v-if="!img_show"></image>
				<image :src="iconurl + '/static/newImg/yes.png'" mode="" v-if="img_show"></image>
			</view>
			<view class="txt" style="color:#fff;">
				请您仔细阅读<text style="color: #1298FF;"
					@click="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text><text style="color: #1298FF;"
					@click="goUrl('/userPage/user/agreement?id=3')">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_show: false,
				navigationBarHeight: 0,
				iconurl: this.$configs.urls,
				isIos: false,
				osName: '',
				js_code: '',
				scene: ''
			};
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					this.osName = res.osName
					// this.navigationBarHeight = res.navigationBarHeight;
				}
			});
			this.scene = option.scene
			////console.log('邀请码', this.scene)
		},
		onShow() {
			if (this.osName == 'ios' || this.osName == 'android') {
				this.getOsname()
			} else {
				this.isIos = true
			}
		},
		onBackPress(options) {
			////console.log(options, "自定义返回逻辑")
			// 这里可以自定义返回逻辑，比如下面跳转其他页面
			uni.switchTab({
				url: "/pages/index/index"
			})
			return
			// uni.switchTab({
			// 	url: "/pages/index/redouble"
			// })
			// // return true 表示禁止默认返回
			// return false;
		},
		methods: {
			//是否开启微信登录
			async getOsname() {
				let res = await this.$Request.get(this.$api.user.isIos)
				// data 1 开启微信登录
				if (res.data == 1) {
					this.isIos = true
				} else {
					this.isIos = false
				}
			},
			agreementState() {
				this.img_show = !this.img_show
			},
			//一键登录
			phoneLogin() {
				if (!this.img_show) {
					uni.showToast({
						title: '请勾选并同意协议',
						icon: "none"
					})
					return false;
				}
				let that = this
				uni.login({
					provider: 'univerify',
					univerifyStyle: { // 自定义登录框样式
						"fullScreen": true, // 是否全屏显示，默认值： false
						"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
						"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）  
						"icon": {
							"path": "static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
						},
						"phoneNum": {
							"color": "#202020" // 手机号文字颜色 默认值：#202020  
						},
						"slogan": {
							"color": "#333333" //  slogan 字体颜色 默认值：#BBBBBB  
						},
						"authButton": {
							"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  
							"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
							"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
							"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
							"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
							"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
						},
						"otherLoginButton": {
							"visible": false, // 是否显示其他登录按钮，默认值：true  
							"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
							"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
							"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
							"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
							"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）  
							"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
						},
						"privacyTerms": {
							"defaultCheckBoxState": false, // 条款勾选框初始状态 默认值： true
							"uncheckedImage": "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)   
							"checkedImage": "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)   
							"checkBoxSize": 12, // 可选 条款勾选框大小，仅android支持
							"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
							"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
							"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
							"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
							// "privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
							// 	{
							// 		"url": "https://box.vdoutui.cn/h5/#/pages/user/pages/ruler?id=3&myfrom=1", // 点击跳转的协议详情页面  
							// 		"title": "用户服务协议" // 协议名称  
							// 	}
							// ]
						},
						"buttons": { // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
							"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
							"list": [{
									"provider": "apple",
									"iconPath": "/static/apple.png" // 图标路径仅支持本地图片
								},
								{
									"provider": "weixin",
									"iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
								}
							]
						}
					},
					success(res) { // 登录成功
						// ////console.log('登录成功', res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
						uniCloud.callFunction({
							name: 'login', // 云函数名称
							data: { //传给云函数的参数
								'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
								'openid': res.authResult.openid // 客户端一键登录接口返回的openid
							},
							success(callRes) {
								// ////console.log('调用云函数成功', callRes)
								let data = {
									mobile: callRes.result.content.phoneNumber
								}
								that.$Request.post(that.$api.user.mobileLogin, data).then(res => {
									////console.log('登录成功', res)
									uni.setStorageSync('USERINFO', res.data.access_token)


									uni.switchTab({
										url: '/pages/index/redouble'
									})
								});
							},
							fail(callErr) {
								// ////console.log('调用云函数出错' + callErr)
							},
							complete() {
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},
					fail(res) { // 登录失败
						uni.showToast({
							title: res.errMsg,
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			goindex() {
				uni.switchTab({
					url: "/pages/index/redouble"
				})
			},
			gophone() {
				if (!this.img_show) {
					uni.showToast({
						title: '请勾选并同意协议',
						icon: "none"
					})
					return false;
				}
				uni.navigateTo({
					url: "/userPage/user/login/register?invite_code= " + this.scene
				})
			},
			goUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			getUser() {
				////console.log("登录")
				uni.getUserProfile({
					desc: '测试',
					// provider: 'weixin',
					success: (res) => {
						let bindobj = {
							openId: '',
							nickName: res.userInfo.nickName, //昵称
							avatarUrl: res.userInfo.avatarUrl, //头像
							invite_code: this.scene, //邀请码
							unionId: ''
						}
						var data = {
							type: 'weixin',
							js_code: this.js_code,
							source: 1,
							nickname: res.userInfo.nickName, //昵称
							avatar: res.userInfo.avatarUrl, //头像
							invite_code: this.scene, //邀请码
							wechat_type: uni.getStorageSync('wechat_type'),
						}
						this.$Request.post(this.$api.user.authLogin, data).then(res => {
							bindobj.openId = res.data.data.openid
							bindobj.unionId = res.data.data.unionid
							uni.hideLoading()
							if (res.data.status == 0) {
								//0表示需要绑定手机号1直接可以登录
								uni.navigateTo({
									url: "/userPage/user/login/bindphone?bindobj=" +
										JSON.stringify(bindobj)
								})
							} else if (res.data.status == 1) {
								uni.setStorageSync("USERINFO", res.data.data
									.access_token)
								uni.showToast({
									title: res.msg,
									icon: 'none',
									success: res => {

										uni.switchTab({
											url: '/pages/index/redouble'
										});
									}
								});
							}
						})
					},
					fail: (file) => {
						////console.log(file)
						this.$u.toast(file)
						uni.hideLoading()
					}
				})
			},
			login_weixin() {
				if (!this.img_show) {
					uni.showToast({
						title: '请勾选并同意协议',
						icon: "none"
					})
					return false;
				}
				var that = this
				uni.showLoading({
					title: "加载中..."
				})
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (res) => {
						////console.log(res, "微信登录");
						this.js_code = res.code
					},
					fail: function(err) {
						////console.log("登录授权失败", err);
					}
				})
				this.getUser()
				// #endif
				// #ifndef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(res) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(res) {
								////console.log(res)
								let bindobj = {
									openId: res.userInfo.openId,
									nickName: res.userInfo.nickName, //头像
									avatarUrl: res.userInfo.avatarUrl, //昵称
									unionId: res.userInfo.unionId,
								}
								var data = {
									type: 'weixin',
									openid: res.userInfo.openId,
									unionid: res.userInfo.unionId,
									source: 2,
									nickname: res.userInfo.nickName, //昵称
									avatar: res.userInfo.avatarUrl, //头像
								}
								that.$Request.post(that.$api.user.authLogin, data).then(res => {
									////console.log(2, res)
									uni.hideLoading()
									if (res.data.status == 0) {
										//0表示需要绑定手机号1直接可以登录
										uni.navigateTo({
											url: "/userPage/user/login/bindphone?bindobj=" +
												JSON.stringify(bindobj)
										})
									} else if (res.data.status == 1) {
										uni.setStorageSync("USERINFO", res.data.data
											.access_token)
										uni.showToast({
											title: res.msg,
											icon: 'none',
											success: res => {
												// #ifdef MP-WEIXIN
												uni.switchTab({
													url: "/pages/index/index"
												})
												return
												// #endif
												uni.switchTab({
													url: '/pages/index/redouble'
												});
											}
										});
									}

								})
							}
						})
					},
					fail(file) {
						////console.log("登录失败", file)
						that.$u.toast(file)
						uni.hideLoading()
					}
				})
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		// background: linear-gradient(180deg, #F5EDFC 0%, #FFFFFF 19%);
		background-image: url('https://mh.qingfentool.vip/upload/image/20230526/09214febe0a02a205697798ff8fe49ec.png');
		background-size: 100% 100%;
		overflow: hidden;

		.agreement {
			width: 650rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			margin-top: 100rpx;

			.img {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.txt {
				margin-left: 10rpx;
			}
		}

		.footerall {
			margin-top: 100rpx;

			.footimg {
				margin: 0 auto;
				margin-top: 57rpx;
				width: 70%;
				display: flex;
				justify-content: space-around;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 104rpx;
						height: 104rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #fff;
						margin-top: 10rpx;
					}
				}
			}

			.footer-tip {
				font-size: 24upx;
				// color: #999999;
				text-align: center;
				display: flex;
				align-items: center;
				margin: 0 auto;
				width: 588rpx;

				&:before {
					flex: 1;
					content: '';
					height: 2upx;
					background: #707070;
					margin-right: 30upx;
				}

				&:after {
					margin-left: 30upx;
					flex: 1;
					content: '';
					height: 2upx;
					background: #707070;
				}

			}
		}

		.footer_xieyi {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 138rpx;

			.name,
			.text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;

				text {
					font-size: 28rpx;
					border-bottom: 1px solid #333;
				}
			}
		}

		.login_box {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
			margin-top: 52rpx;
		}

		.header {
			display: flex;
			justify-content: space-between;
			padding: 40rpx;
			position: absolute;
			top: 70rpx;

			image {
				width: 25rpx;
				height: 25rpx;

			}
		}

		.section {
			display: flex;
			// align-items: center;
			flex-direction: column;
			margin-top: 230rpx;
			margin-left: 90rpx;


			.shenlongxiang_box {
				width: 80%;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 32rpx;
				color: white;

				image {
					width: 52rpx;
					height: 52rpx;
					// border-radius: 50%;
					margin-left: 12rpx;
				}

				text {
					font-size: 52rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #fff;
				}
			}

		}

		.footer {
			width: 588rpx;
			height: 88rpx;
			margin: 0 auto;
			background: #FAE24E;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 258rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				margin-left: 10rpx;
			}
		}
	}
</style>